import React, {CSSProperties} from "react";
import styled from "styled-components";
import ImageCommon from "../assets/image/common/ImageCommon";
import {ChainName, colors, TimeStatusLabel, FishLp, getFishCardSrc, FishInfoCn} from "../common/common";
import {Dropdown, Menu, Tooltip,} from "antd";
import {useWallet} from "use-wallet";
import TokenSymbol from "./TokenSymbol";
import useHusdPool from "../hooks/useHusdPool";
import useApprove, {ApprovalState} from "../hooks/useApprove";
import useBasisCash from "../hooks/useBasisCash";
import {DepoManager} from "./ComponentsManager";
import {decimalToBalance} from "../basis-cash/ether-utils";
import {useTransactionAdder} from "../state/transactions/hooks";
import Countdown from "antd/lib/statistic/Countdown";
import moment from "moment";
import {useTranslation} from "react-i18next";
import {useUpdateV1, useV1} from "../state/v1action/hooks";
import {useDispatch} from "react-redux";
import {updateV1} from "../state/v1action/action";
import config from "../config";
import useNYCPrice from "../hooks/useNYCPrice";
import useNftPool from "../hooks/useNftPool";
import useHandleTransactionReceipt from "../hooks/useHandleTransactionReceipt";
import useModal from "../hooks/useModal";
import useFishLpInfo from "../hooks/useFishLpInfo";
import MyFishModal from "./fishmodal/MyFishModal";
import WithDrawFishCardModal from "./fishmodal/WithDrawFishCardModal";
import FishStoreModal from "./fishmodal/FishStoreModal";
import {Popover} from "antd-mobile";

const coins = [
    {name: "NYC", disabled: false},
    {name: "HT", disabled: true},
    {name: "MDX", disabled: true},
    // {name: "HUSD", disabled: false},
    // {name: "USDT", disabled: false},
    // {name: "BTC", disabled: false},
    // {name: "ETH", disabled: false},
    // {name: "TPT", disabled: false},
    // {name: "FILDA", disabled: false},
    // {name: "LAVA", disabled: false},
];
//币种信息
export const CoinLogo = ({v2=true}:any) => {
    const price = useNYCPrice();
    return (
        <CoinBg>
            <Coin
                src={v2?ImageCommon.icon_coin_gold:ImageCommon.icon_coin}
            ></Coin>
            <CoinTitle>
                {v2?'NYC':'YNC'}
                {v2 && <PriceView>{price.toFixed(4)}</PriceView>}
            </CoinTitle>
        </CoinBg>
    )
}

// 币种选项栏
export const CoinNav = React.memo(() => {


    const [select, setSelect] = React.useState(0);

    function changeItem(item: any, index: number) {
        if (item.disabled || select === index) {
            return false;
        }
        setSelect(index);
    }

    return (
        <CoinNavWrap>
            <ArrowLeft
                src={ImageCommon.icon_arrow_left}
            ></ArrowLeft>
            {coins.map((item, index) => {
                return (
                    <CoinNavItem
                        active={select === index}
                        className={select === index ? "active" : ""}
                        disabled={item.disabled}
                        onClick={() => {
                            changeItem(item, index)
                        }}
                    >{item.name}</CoinNavItem>
                )
            })}
            <ArrowRight
                src={ImageCommon.icon_arrow_right}
            ></ArrowRight>
        </CoinNavWrap>
    )
})
// 币种选项栏 移动端
export const CoinNavMobile = React.memo(() => {
    const [select, setSelect] = React.useState(0);

    function changeItem(item: any, index: number) {
        if (item.disabled || select === index) {
            return false;
        }
        setSelect(index);
    }

    return (
        <CoinNavMobileWrap>
            <ArrowLeft
                src={ImageCommon.icon_arrow_left}
            ></ArrowLeft>
            {coins.map((item, index) => {
                return (
                    <CoinNavItem
                        active={select === index}
                        className={select === index ? "active" : ""}
                        disabled={item.disabled}
                        onClick={() => {
                            changeItem(item, index)
                        }}
                    >{item.name}</CoinNavItem>
                )
            })}
            <ArrowRight
                src={ImageCommon.icon_arrow_right}
            ></ArrowRight>
        </CoinNavMobileWrap>
    )
})
type pledge_item_type = {
    key?: string,
    coin: string,
    setCount?:any,
    v2?:boolean
}
export const PledgeItem = React.memo(({coin,setCount,v2=true,}: pledge_item_type) => {
    const {t} = useTranslation();
    const husdpool = useHusdPool(coin,v2);
    let pool = coin+"_POOL";
    const basisCash = useBasisCash();
    const addTransaction = useTransactionAdder();
    const token = basisCash?.externalTokens?.[coin];
    const name = v2?"NYC":"YNC";
    let rewardToken = basisCash?.externalTokens?.[name];
    if(!v2){
        pool = coin+"_POOL_OLD";
    }
    const decimal = token?.decimal || 18;
    const [approveStatus, approve] = useApprove(basisCash?.externalTokens?.[coin], basisCash?.contracts?.[pool]?.address);
    let coinName = coin;
    const [oldTvl, setOldTvl] = React.useState(0);
    if (coin=='wETH'){
        coinName="ETH";
    }
    const addr = husdpool.addr || "";
    function depoToken() {
        if (approveStatus == ApprovalState.NOT_APPROVED) {
            approve();
        } else {
            DepoManager.show({token: coin, displayBalance: husdpool.myBalance, confirm: requestDepo,depo:true})
        }
    }

    // 提取token
    function withdrawToken() {
        DepoManager.show({token: coin, displayBalance: husdpool.myDepo, confirm: requestWithDraw, depo: false})
    }

    async function getReward() {
        const response = await basisCash?.harvest(pool);
        addTransaction(response, {
            summary: t("claim")+`${rewardToken.symbol}`,
            approval: {
                tokenAddress: rewardToken.address,
                spender: "",
            },
        });
    }

    async function requestDepo(amount: string) {
        console.log(token,pool,'token',decimal,decimalToBalance(amount, decimal))
        const response = await basisCash?.stake(pool, decimalToBalance(amount, decimal))
        addTransaction(response, {
            summary: t("stake")+`${token.symbol}`,
            approval: {
                tokenAddress: token.address,
                spender: "",
            },
        });
    }

    async function requestWithDraw(amount: string) {
        const response = await basisCash?.unstake(pool, decimalToBalance(amount, decimal))
        addTransaction(response, {
            summary: t("claim")+`${token.symbol}`,
            approval: {
                tokenAddress: token.address,
                spender: "",
            },
        });
    }

    React.useEffect(()=>{
        if (husdpool.tvl) {
            //console.log('oldTVL childrenMsg', oldTvl);
            const tvl = Number(husdpool.tvl)-Number(oldTvl);
            //console.log('tvl childrenMsg', tvl);
            setCount(tvl);
            setOldTvl(Number(husdpool.tvl));
            //console.log('new oldTVL childrenMsg', oldTvl);
        }
      },[husdpool]);

    return (
        <PledgeItemWrap>
            <CenterView>
                <PledgeWind>
                    <TokenSymbol
                        symbol={coin}
                    ></TokenSymbol>
                    <div
                        style={pledge_item_title}
                    >{coinName}
                    </div>
                    <div
                        style={pledge_item_status}
                    >
                        {t(`${TimeStatusLabel[husdpool.timeStatus]}`)}
                    </div>
                    <div
                        style={pledge_item_amount_title}
                    >{t("stakeLp")}
                    </div>
                    <PledgeItemAmount>
                        {husdpool.totalSupply || "0.0000"}
                    </PledgeItemAmount>
                    <div
                        style={pledge_item_amount_title}
                    >{t("tvl")}
                    </div>
                    <PledgeItemAmount>
                        $ {husdpool.tvl || "0.0000"}
                    </PledgeItemAmount>
                </PledgeWind>
                <PledgeMobile>
                    <div>
                        <TokenSymbol
                            symbol={coin}
                        ></TokenSymbol>
                        <PledgeItemTitle>
                            {coin}
                        </PledgeItemTitle>
                    </div>
                    <div
                        style={{flex:1}}
                    >
                        <FlexViewBetween>
                            <PledgeItemAmountTitle>
                                {t("stakeLp")}
                            </PledgeItemAmountTitle>
                            <PledgeItemAmount>
                                {husdpool.totalSupply || "0.0000"}
                            </PledgeItemAmount>
                        </FlexViewBetween>
                        <FlexViewBetween>
                            <PledgeItemAmountTitle>
                                {t("tvl")}
                            </PledgeItemAmountTitle>
                            <PledgeItemAmount>
                                $ {husdpool.tvl || "0.0000"}
                            </PledgeItemAmount>
                        </FlexViewBetween>
                    </div>
                </PledgeMobile>
                <WinView>
                    <div
                        style={{marginTop: '25px'}}
                    ></div>
                </WinView>
                <PledgeInfo
                    title={t("myDepo")}
                    value={husdpool.myDepo || "0.0000"}
                ></PledgeInfo>
                <PledgeInfo
                    title={t("myEarned")}
                    value={husdpool.earned || "0.0000"}
                ></PledgeInfo>
                <PledgeInfo
                    title={t("apr")}
                    value={husdpool.apy || "0.0000"}
                ></PledgeInfo>
                <PledgeInfo
                    title={t("apy")}
                    value={husdpool.apr || "0.0000"}
                ></PledgeInfo>
                <PledgeInfo
                    title={t("dailyBonus")}
                    value={husdpool.dailyReward || "0.0000"}
                ></PledgeInfo>
                <PledgeInfo
                    title={t("totalBonus")}
                    value={husdpool.totalReward || "0.0000"}
                ></PledgeInfo>
                <GoLavaSwap></GoLavaSwap>
                <WinView>
                    <PlaceholderView
                        height={'35px'}
                    ></PlaceholderView>
                </WinView>

                <FlexViewCenter>
                    <span
                        style={pledge_info_title}
                    >{t("walletBalance")}</span>
                    <PledgeItemBalance>{husdpool.myBalance || "0.0000"}</PledgeItemBalance>
                </FlexViewCenter>
                <FlexViewCenter>
                    <Addr href={`${config.etherscanUrl}/address/${addr}`} target="_blank">
                        Contract address: {addr.substring(0, 4) + '****' + addr.substring(addr.length - 4, addr.length)}
                    </Addr>
                </FlexViewCenter>
                {coin=='YNC'?(<>
                    <BlueButton
                        title={approveStatus == ApprovalState.NOT_APPROVED ? t("approve") + coin : t("burn") + coin}
                        onClick={depoToken}
                    ></BlueButton>
                    <BorderButton
                        onClick={getReward}
                        title={t("claim")+name}
                    ></BorderButton>
                </>):v2?(<>
                    <BlueButton
                        title={approveStatus == ApprovalState.NOT_APPROVED ? t("approve") + coin : t("stake") + coin}
                        onClick={depoToken}
                    ></BlueButton>
                    <MainButton
                        onClick={withdrawToken}
                        title={t("withdraw") + coin}
                    ></MainButton>
                    <BorderButton
                        onClick={getReward}
                        title={t("claim")+name}
                    ></BorderButton>
                </>):(<>
                    <MainButton
                        onClick={withdrawToken}
                        title={t("withdraw") + coin}
                    ></MainButton>
                </>)}
            </CenterView>
        </PledgeItemWrap>
    )
})
type pledge_nft_item_type = {
    key?: string,
    coin: string,
    setCount?:any,
}
export const PledgeNftItem = React.memo(({coin,setCount}: pledge_nft_item_type) => {
    const {t} = useTranslation();
    const v2 = true;
    const husdpool = useNftPool(coin,v2);
    const [onPresentFishStoreModal] = useModal(<FishStoreModal coin={coin} earned={husdpool.earned}/>);
    console.log(husdpool,'husdpool')
    let pool = coin+"_FishCardPool";
    const basisCash = useBasisCash();
    const addTransaction = useTransactionAdder();
    const handleTransactionReceipt = useHandleTransactionReceipt();
    const [approveStatus, approve] = useApprove(basisCash?.externalTokens?.[coin], basisCash?.contracts?.[pool]?.address);
    const token = basisCash?.externalTokens?.[coin];
    const name = "NYC";
    let rewardToken = basisCash?.externalTokens?.[name];
    const decimal = token?.decimal || 18;
    let coinName = coin;
    const [oldTvl, setOldTvl] = React.useState(0);
    const [balance, setBalance] = React.useState('');
    if (coin=='wETH'){
        coinName="ETH";
    }
    const addr = husdpool.addr || "";
    function depoToken() {
        if (approveStatus == ApprovalState.NOT_APPROVED) {
            approve();
        } else {
            DepoManager.show({token: coin, displayBalance: husdpool.myBalance, confirm: requestDepo,depo:true})
        }
    }

    // 提取token
    function withdrawToken() {
        DepoManager.show({token: coin, displayBalance: husdpool.myDepo, confirm: requestWithDraw, depo: false})
    }

    async function getReward() {
        if (basisCash) {
            onPresentFishStoreModal();
            // basisCash.NYC.displayedBalanceOf(basisCash.myAccount).then(res => {
            //     setBalance(res);
            //     setType(0);
            //     setShowNftStore(true);
            // });
        }
        //show(<NftStore pool={pool} basisCash={basisCash} handleTransactionReceipt={handleTransactionReceipt} ></NftStore>, {key: '_nftstore'});
    }

    async function requestDepo(amount: string) {
        console.log(token,pool,'token',decimal,decimalToBalance(amount, decimal))
        const response = await basisCash?.stake(pool, decimalToBalance(amount, decimal))
        addTransaction(response, {
            summary: t("stake")+`${token.symbol}`,
            approval: {
                tokenAddress: token.address,
                spender: "",
            },
        });
    }

    async function requestWithDraw(amount: string) {
        const response = await basisCash?.unstake(pool, decimalToBalance(amount, decimal))
        addTransaction(response, {
            summary: t("claim")+`${token.symbol}`,
            approval: {
                tokenAddress: token.address,
                spender: "",
            },
        });
    }

    React.useEffect(()=>{
        if (husdpool.tvl) {
            //console.log('oldTVL childrenMsg', oldTvl);
            const tvl = Number(husdpool.tvl)-Number(oldTvl);
            //console.log('tvl childrenMsg', tvl);
            setCount(tvl);
            setOldTvl(Number(husdpool.tvl));
            //console.log('new oldTVL childrenMsg', oldTvl);
        }
      },[husdpool]);

    React.useEffect(()=>{
        if (basisCash) {
            basisCash.NYC.displayedBalanceOf(basisCash.myAccount).then(res => {
                setBalance(res);
            });
        }
    },[basisCash]);

    return (
        <PledgeItemWrap>
            <CenterView>
                <PledgeWind>
                    <TokenSymbol
                        symbol={coin}
                    ></TokenSymbol>
                    <div
                        style={pledge_item_title}
                    >{coinName}
                    </div>
                    <div
                        style={pledge_item_status}
                    >
                        {t(`${TimeStatusLabel[husdpool.timeStatus]}`)}
                    </div>
                    <div
                        style={pledge_item_amount_title}
                    >{t("stakeLp")}
                    </div>
                    <PledgeItemAmount>
                        {husdpool.totalSupply || "0.0000"}
                    </PledgeItemAmount>
                    <div
                        style={pledge_item_amount_title}
                    >{t("tvl")}
                    </div>
                    <PledgeItemAmount>
                        $ {husdpool.tvl || "0.0000"}
                    </PledgeItemAmount>
                </PledgeWind>
                <PledgeMobile>
                    <div>
                        <TokenSymbol
                            symbol={coin}
                        ></TokenSymbol>
                        <PledgeItemTitle>
                            {coin}
                        </PledgeItemTitle>
                    </div>
                    <div
                        style={{flex:1}}
                    >
                        <FlexViewBetween>
                            <PledgeItemAmountTitle>
                                {t("stakeLp")}
                            </PledgeItemAmountTitle>
                            <PledgeItemAmount>
                                {husdpool.totalSupply || "0.0000"}
                            </PledgeItemAmount>
                        </FlexViewBetween>
                        <FlexViewBetween>
                            <PledgeItemAmountTitle>
                                {t("tvl")}
                            </PledgeItemAmountTitle>
                            <PledgeItemAmount>
                                $ {husdpool.tvl || "0.0000"}
                            </PledgeItemAmount>
                        </FlexViewBetween>
                    </div>
                </PledgeMobile>
                <WinView>
                    <div
                        style={{marginTop: '25px'}}
                    ></div>
                </WinView>
                <PledgeInfo
                    title={t("myDepo")}
                    value={husdpool.myDepo || "0.0000"}
                ></PledgeInfo>
                <PledgeInfo
                    title={t("myEarned")}
                    value={husdpool.earned || "0.0000"}
                ></PledgeInfo>
                <PledgeInfo
                    title={t("apr")}
                    value={husdpool.apy || "0.0000"}
                ></PledgeInfo>
                <PledgeInfo
                    title={t("apy")}
                    value={husdpool.apr || "0.0000"}
                ></PledgeInfo>
                <PledgeInfo
                    title={t("dailyBonus")}
                    value={husdpool.dailyReward || "0.0000"}
                ></PledgeInfo>
                <PledgeInfo
                    title={t("totalBonus")}
                    value={husdpool.totalReward || "0.0000"}
                ></PledgeInfo>
                <GoLavaSwap></GoLavaSwap>
                <WinView>
                    <PlaceholderView
                        height={'35px'}
                    ></PlaceholderView>
                </WinView>

                <FlexViewCenter>
                    <span
                        style={pledge_info_title}
                    >{t("walletBalance")}</span>
                    <PledgeItemBalance>{husdpool.myBalance || "0.0000"}</PledgeItemBalance>
                </FlexViewCenter>
                <FlexViewCenter>
                    <Addr href={`${config.etherscanUrl}/address/${addr}`} target="_blank">
                        Contract address: {addr.substring(0, 4) + '****' + addr.substring(addr.length - 4, addr.length)}
                    </Addr>
                </FlexViewCenter>
                {(<>
                    <BlueButton
                        title={approveStatus == ApprovalState.NOT_APPROVED ? t("approve") + coin : t("stake") + coin}
                        onClick={depoToken}
                    ></BlueButton>
                    <MainButton
                        onClick={withdrawToken}
                        title={t("withdraw") + coin}
                    ></MainButton>
                    <BorderButton
                        onClick={getReward}
                        // title={t("claim")+name}
                        title={t("receiveNftFishCard")}
                    ></BorderButton>
                </>)}
            </CenterView>
            {/*<div style={showNftStore ? {display: 'block'} : {display: 'none'}}>*/}
            {/*    <Nft*/}
            {/*        coin={coin}*/}
            {/*        balance={balance} _type={type} pool={pool} handleTransactionReceipt={handleTransactionReceipt} onClose={() => {setShowNftStore(false)}} earned={husdpool.earned || '0'}></Nft>*/}
            {/*</div>*/}

        </PledgeItemWrap>
    )
})
type pledge_info_type = {
    title?: string,
    value?: any
}
export const PledgeInfo = React.memo(({title, value}: pledge_info_type) => {
    return (
        <PledgeInfoWrap>
            <FlexView>
                <span
                    style={pledge_info_title}
                >{title}</span>
                <div
                    style={pledge_info_flag}
                ></div>
            </FlexView>

            <PledgeInfoAmount>
                {value}
            </PledgeInfoAmount>
        </PledgeInfoWrap>
    )
})
type button = {
    title?: string,
    onClick?: any,
}
export const BlueButton = React.memo(({title, onClick}: button) => {
    const basisCash = useBasisCash();
    return (
        <ButtonWrap
            onClick={onClick}
        >
            <ButtonText>{title}</ButtonText>
        </ButtonWrap>
    )
})
export const MainButton = React.memo(({title, onClick}: button) => {
    return (
        <ButtonWrapMain
            onClick={onClick}
        >
            <ButtonText>{title}</ButtonText>
        </ButtonWrapMain>
    )
})
export const BorderButton = React.memo(({title, onClick}: button) => {
    return (
        <ButtonWrapBorder
            onClick={onClick}
        >
            <ButtonTextMain>{title}</ButtonTextMain>
        </ButtonWrapBorder>
    )
})
export const MainLargeButton = React.memo(({title, onClick}: button) => {
    return (
        <ButtonWrapMainLarge
            onClick={onClick}
        >
            <ButtonTextLarge>{title}</ButtonTextLarge>
        </ButtonWrapMainLarge>
    )
})
export const UnStartView = React.memo(() => {
    return (
        <UnStart>未开始</UnStart>
    )
})
type lp_card_type = {
    title?: string,
    token?: string,
    showBtn?: boolean,
    btnTitle?: string,
    onClick?: any,
    amount?: string,
    children?:any
}
export const LpCard = React.memo(({title, token, showBtn = true, btnTitle, onClick, amount="0.0000",children}: lp_card_type) => {
    return (
        <LpCardWrap>
            <TokenSymbol
                symbol={token}
            ></TokenSymbol>
            <LpCardBalance>{amount}</LpCardBalance>
            <LpCardStatus>{title}</LpCardStatus>
            {showBtn ? <MainButton
                title={btnTitle}
                onClick={onClick}
            ></MainButton> : <div
                style={{height: '40px',marginTop:'10px'}}
            ></div>}
            {children}
        </LpCardWrap>
    )
})

type menu = {
    title:string,
    key:string
}
type dropdown = {
    title?: string,
    marginLeft?: string,
    marginRight?: string,
    menus?:menu[],
    onClick?:any
}
const DownItem = Popover.Item;
export const MainDropDown = React.memo(({title, marginLeft, marginRight,menus,onClick=()=>{}}: dropdown) => {
    const [visible, setVisible] = React.useState(false);
    function getMenus() {
        if (menus) {
            return menus.map((item: any, index: number) => {
                return (
                    <DownItem
                        key={item.key}
                    >
                        {item.title}
                    </DownItem>
                )
            })
        }
        return [];
    }
    function handleVisibleChange(visible: boolean) {
        setVisible(visible);
    };

    function select(data: any) {
        handleVisibleChange(false);
        onClick(data);
    }
    return (
        <Popover
            overlay={getMenus()}
            onSelect={select}
            onVisibleChange={handleVisibleChange}
            visible={visible}
        >
            <DropDownWrap
                marginLeft={marginLeft}
                marginRight={marginRight}
            >
                <DropDownTitle>{title}</DropDownTitle>
                <DropDownFlag
                    src={ImageCommon.icon_dropdown}
                ></DropDownFlag>
            </DropDownWrap>
        </Popover>
    )
})

export const ConnectWallet = React.memo(() => {
    const {chainId, ethereum, account, connect, status} = useWallet();
    React.useEffect(() => {
        if (status != 'connected') {
            connect('injected');
        }
    }, [])
    return (
        <FlexView>
            {account ?
                <Tooltip
                    title={account}
                >
                    <DropDownWrap
                        marginRight={'15px'}>
                        <DropDownTitle>{ChainName[chainId]}</DropDownTitle>
                    </DropDownWrap>
                </Tooltip>
                 : <DropDownWrap
                marginRight={'15px'}
                onClick={() => connect('injected')}
            >
                <DropDownTitle>连接钱包</DropDownTitle>
            </DropDownWrap>}
        </FlexView>
    )
})
export const CountDown = React.memo(()=>{
    const {t} = useTranslation();
    const deadline = moment('2021-05-08 14:00:00').valueOf();
    return(
        <div
            style={{marginBottom:"20px"}}
        >
            <WinView>
                <FlexViewCenter>
                    <div
                        style={{fontSize:'20px',fontWeight:400}}
                    >{t("oldEnd")}：</div>
                    <Countdown
                        value={deadline}
                        valueStyle={{color:colors.main,fontSize:'30px',fontWeight:'bold'}}
                        format="D 天 H 时 m 分 s 秒"
                    />
                </FlexViewCenter>
            </WinView>
            <MobileView>
                <FlexViewCenter>
                    <div
                        style={{fontSize:'14px',fontWeight:400}}
                    >{t("oldEnd")}：</div>
                    <Countdown
                        value={deadline}
                        valueStyle={{color:colors.main,fontSize:'16px',fontWeight:'bold'}}
                        format="D 天 H 时 m 分 s 秒"
                    />
                </FlexViewCenter>
            </MobileView>
        </div>
    )
})
export const CountDownNyc = React.memo(()=>{
    const {t} = useTranslation();
    const deadline = moment('2021-04-23 14:00:00').valueOf();
    return(
        <div
            style={{marginBottom:"20px"}}
        >
            <WinView>
                <FlexViewCenter>
                    <div
                        style={{color:colors.main,fontSize:'26px',fontWeight:'bold'}}
                    >{t("newStart")}：</div>
                    <Countdown
                        value={deadline}
                        valueStyle={{color:colors.main,fontSize:'30px',fontWeight:'bold'}}
                        format="D 天 H 时 m 分 s 秒"
                    />
                </FlexViewCenter>
            </WinView>
            <MobileView>
                <FlexViewCenter>
                    <div
                        style={{color:colors.main,fontSize:'14px',fontWeight:'bold'}}
                    >{t("newStart")}：</div>
                    <Countdown
                        value={deadline}
                        valueStyle={{color:colors.main,fontSize:'16px',fontWeight:'bold'}}
                        format="D 天 H 时 m 分 s 秒"
                    />
                </FlexViewCenter>
            </MobileView>
        </div>
    )
})
export const DangerTip = React.memo(()=>{
    return(
        <WarningWrap>
            <WarningIcon
                src={ImageCommon.icon_warning}
            ></WarningIcon>
            <Tip>
                <WarningTitle>
                    风险声明和提示 <br/>
                </WarningTitle>
                我们在此特别提醒您：<br/>
                1. NYC不具有投资价值，仅为FishNFT社区的治理代币<br/>
                2. NYC的初始价格为每个0.003u<br/>
                3. 数字资产交易存在风险，其全天不间断交易，没有涨跌限制，价格可能出现大幅波动<br/>
                4. 此外，除了上述提及过的风险意外，还会有未能预测之可能性存在，请您在做出任何决定和行为之前，慎重考虑<br/>
            </Tip>
        </WarningWrap>
    )
})

export const GoLavaSwap = React.memo(({title="交易NYC"}:any)=>{
    const basisCash = useBasisCash();
    return(
        <FlexViewCenter
            onClick={() => window.open(basisCash.getBuyTokenUrl('USDT/NYC',basisCash?.config?.lavaUrl))}
        >
            <LavaSwapView>
                <img
                    src={ImageCommon.icon_lavaswap}
                    alt=""
                    height={20}
                />
                {title}
            </LavaSwapView>
        </FlexViewCenter>
    )
})
export const AdLp = React.memo(()=>{
    const basisCash = useBasisCash();
    return(
        <div></div>

    )
})
// <MainButton
//     title={"为 YNC_USDT_LP 提供流动性"}
//     onClick={() => window.open(basisCash.getStakeLpUrl('USDT/YNC',basisCash?.config?.lavaUrl))}
// >
// </MainButton>
const WarningWrap = styled.div`
    background: #FFFAF6;
    border: 2px solid #F27405;
    border-radius: 20px;
    padding:30px;
    display:flex;
    align-items:center;
    justify-content:space-around;
    margin-bottom:30px;
    margin-top:30px;
     @media (max-width: 768px) {
        display:block;
        justify-content:center;
        width:300px;
        margin:20px auto;
    };
`
const WarningIcon = styled.img`
    width:156px;
    height:156px;
    src:${props => props.src};
    margin-right:80px;
    @media (max-width: 768px) {
       margin-right:0px;
        width:78px;
        height:78px;
        margin-bottom:30px;
    };
`
const WarningTitle = styled.div`
    font-size: 20px;
    font-weight: 800;
    color: ${colors.main};
    margin-bottom:20px;
    @media (max-width: 768px) {
       text-align:center;
       
    };
`
const Tip = styled.div`
    font-size: 14px;
    color: ${colors.black};
    line-height: 21px;
    text-align:left;
`
const DropDownFlag = styled.img`
    width:13px;
    height:7px;
    margin-left:5px;
    src:${props => props.src}
`

export const DropDownWrap = styled.div<dropdown>`
    height: 38px;
    background: ${colors.white};
    border-radius: 8px;
    padding-left:10px;
    padding-right:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left:${props => props.marginLeft};
    margin-right:${props => props.marginRight};
    cursor:pointer;
`
export const DropDownTitle = styled.span`
    font-size: 18px;
    font-weight: 800;
    color: ${colors.main};
     @media (max-width: 768px) {
        font-size: 14px;
    };
`
const ButtonWrap = styled.div`
    width: 260px;
    height: 40px;
    background: ${colors.blue};
    border-radius: 10px;
    margin-top:10px;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
`
const ButtonWrapMain = styled.div`
    width: 260px;
    height: 40px;
    background: ${colors.main};
    border-radius: 10px;
    margin-top:10px;
    display:flex;
   justify-content:center;
    align-items:center;
    cursor:pointer;
`
const ButtonWrapMainLarge = styled.div`
    width: 336px;
    height: 70px;
    background: ${colors.main};
    border-radius: 10px;
    margin-top:10px;
    display:flex;
   justify-content:center;
    align-items:center;
    cursor:pointer;
     @media (max-width: 768px) {
        width: 200px;
        height: 50px;
    };
`
const ButtonWrapBorder = styled.div`
    width: 260px;
    height: 40px;
    background: ${colors.white};
    border-radius: 10px;
    border: 2px solid #F27405;
    margin-top:10px;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
`
const ButtonText = styled.div`
   font-size:18px;
   font-weight:bold;
   color:${colors.white};
`
const ButtonTextLarge = styled.div`
   font-size:30px;
   font-weight:800;
   color:${colors.white};
   @media (max-width: 768px) {
       font-size:18px;
    };
`
const ButtonTextMain = styled.div`
   font-size:18px;
   font-weight:bold;
   color:${colors.main};
`
export const Content = styled.div`
    max-width:1200px;
    justify-content:center;
    padding-bottom:30px;
    margin:0 auto;
    text-align:center;
`
type margin_type = {
    marginTop?:string,
    marginBottom?:string
}
export const CenterView = styled.div`
   text-align:center;
`
export const FlexView = styled.div`
   display:flex;
   align-items:center;
`
export const FlexViewCenter = styled.div`
   display:flex;
   align-items:center;
   justify-content:center;
`
export const FlexViewCenterColumn = styled.div`
   display:flex;
   align-items:center;
   justify-content:center;
   flex-direction:column;
`
export const FlexViewEnd = styled.div<margin_type>`
   display:flex;
   align-items:center;
   justify-content:flex-end;
   margin-top:${props=>props.marginTop};
   margin-bottom:${props=>props.marginBottom};
`
export const FlexViewBetween = styled.div<margin_type>`
   display:flex;
   align-items:center;
   justify-content:space-between;
   width:100%;
    margin-top:${props=>props.marginTop};
   margin-bottom:${props=>props.marginBottom};
`

type coinnavitem = {
    active: boolean,
    className: string,
    disabled?: boolean,
}
const CoinBg = styled.div`
    height:100px;
    width:388px;
    background-image:url(${ImageCommon.bg_coin});
    background-size:cover;
    display:flex;
    align-items:center;
    margin-top:150px;
    margin-left:20%;
     @media (max-width: 768px) {
        display:none;
    };
`
const Coin = styled.img`
    width:100px;
    height:100px;
     src:${props => props.src};
`
const CoinTitle = styled.span`
    font-size: 30px;
    font-weight: bold;
    color: ${colors.black};
    margin-left:20px;
`

const CoinNavWrap = styled.div`
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:150px;
     @media (max-width: 768px) {
        display:none;
    };
`
const CoinNavMobileWrap = styled.div`
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:180px;
    overflow-x:scroll;
    margin-left:12px;
    margin-right:12px;
    @media (min-width: 768px) {
        display:none;
    };
`
const ArrowLeft = styled.img`
    width:9px;
    height:18px;
    src:${props => props.src};
    margin-right:15px;
`
const ArrowRight = styled.img`
    width:9px;
    height:18px;
    src:${props => props.src};
     margin-left:15px;
`
const CoinNavItem = styled.span<coinnavitem>`
    cursor:pointer;
    font-size:24px;
    font-weight:400;
    color:${props => props.disabled ? colors.white_half : colors.white};
    padding-left:15px;
    padding-right:15px;
    &.active{
        font-size:36px;
        font-weight:bold;
        color:${colors.main};
    }
    @media (max-width: 768px) {
        font-size:16px;
        &.active{
            font-size:18px;
        }
    };
`

const PledgeItemWrap = styled.div`
    width:300.1px;
    border: 2px solid ${colors.main};
    border-radius: 20px;
    justify-content:center;
    display:flex;
    padding-top:30px;
    padding-bottom:30px;
    padding-left:20px;
    padding-right:20px;
    margin-bottom:50px;
    background-color:${colors.white};
    @media (max-width: 768px) {
       margin-bottom:20px;
        padding-top:20px;
        padding-bottom:20px;
    };
`

const CoinIcon = styled.img`
    width:55px;
    height:55px;
    src:${props => props.src};
`
const PledgeItemTitle = styled.div`
    font-size:30px;
    font-weight:500;
    color:${colors.black};
     @media (max-width: 768px) {
       font-size:15px;
       font-weight:bold;
    };
`
const pledge_item_title: CSSProperties = {
    fontSize: '30px',
    fontWeight: 500,
    color: colors.black,
}
export const pledge_item_status: CSSProperties = {
    fontSize: '14px',
    fontWeight: 800,
    color: colors.blue,
}
const PledgeItemAmount = styled.div`
  font-size: 30px;
  font-weight: 800;
  color: ${colors.main}; 
  @media (max-width: 768px) {
       font-size:15px;
       font-weight:bold;
  }; 
`
const pledge_item_amount: CSSProperties = {
    fontSize: '30px',
    fontWeight: 800,
    color: colors.main,
}
const PledgeItemAmountTitle = styled.div`
    font-size: 14px;
    font-weight: 800;
    color: ${colors["6D6D6D"]};
    margin-top: 10px;
    @media (max-width: 768px) {
       margin-top: 0px;
    };
`
const pledge_item_amount_title: CSSProperties = {
    fontSize: '14px',
    fontWeight: 800,
    color: colors["6D6D6D"],
    marginTop: '10px',
}
const PledgeItemBalance = styled.span`
    font-size:14px;
    font-weight:bold;
    color:${colors.black};
    margin-left:20px;
`
const PledgeInfoWrap = styled.div`
    width: 260px;
    height: 30px;
    background: ${colors.F0F0F0};
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 10px;
    @media (max-width: 768px) {
       width:100%;
    };
`
const pledge_info_title: CSSProperties = {
    fontSize: '14px',
    fontWeight: 800,
    color: colors["6D6D6D"],
}
const pledge_info_flag: CSSProperties = {
    width: '1px',
    height: '14px',
    background: colors["494949"],
    marginLeft: '10px'
}
const PledgeInfoAmount = styled.div`
    font-size: 24px;
    font-weight: 800;
    color: ${colors.main};
    @media (max-width: 768px) {
       font-size: 15px;
        font-weight: bold;
    };
`
const pledge_info_amount: CSSProperties = {
    fontSize: '24px',
    fontWeight: 800,
    color: colors.main
}
type placeholder_view = {
    height: string;
}
export const PlaceholderView = styled.div<placeholder_view>`
    height:${props => props.height};
`
const UnStart = styled.span`
    font-size: 90px;
    font-family: PingFang SC;
    font-weight: 800;
    color: #F27405;
     @media (max-width: 768px) {
       font-size: 30px;
    };
`

const LpCardWrap = styled.div`
    width: 300px;
    // height: 330px;
    border: 2px solid #F27405;
    border-radius: 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    margin-bottom:30px;
    padding-bottom: 20px;
    padding-top: 20px;
`
const LpCardBalance = styled.div`
    font-size: 30px;
    font-weight: bold;
    color: ${colors.main};
    margin-top:40px;
    margin-bottom:20px;
`
const LpCardStatus = styled.div`
    font-size: 14px;
    font-weight: 400;
    color: ${colors["6D6D6D"]};
    margin-bottom:40px;
`

const PledgeWind = styled.div`
     @media (max-width: 768px) {
       display:none;
     };
`
const PledgeMobile = styled.div`
     display:none;
     @media (max-width: 768px) {
       display:block;
    };
`
export const WinView = styled.div`
     @media (max-width: 768px) {
       display:none;
     };
`
export const MobileView = styled.div`
     display:none;
     @media (max-width: 768px) {
       display:block;
    };
`
const LavaSwapView = styled(FlexViewCenter)`
    width: 180px;
    height: 24px;
    background: #363D68;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    color: ${colors.white};
    cursor:pointer;
`
const TotalLock = styled(FlexViewCenter)`
    width: 100%;
    height: 120px;
    background: linear-gradient(135deg, #f27405 0%, #f22c05 100%);
    border-radius: 20px;
    margin-bottom:20px;
    @media (max-width: 768px) {
       width:80%;
        height: 60px;
    };
`
const TotalLockTitle = styled.span`
    font-size: 20px;
    font-weight: 400;
    color: ${colors.white};
    margin-right:50px;
     @media (max-width: 768px) {
       font-size: 14px;
       margin-right:20px;
    };
`
const TotalLockAmount = styled.span`
    font-size: 30px;
    font-weight: 800;
    color: ${colors.white};
     @media (max-width: 768px) {
       font-size: 16px;
    };
`

type total_lock_type = {
    title?: string,
    amount?: string,
}
export const TotalLockView = React.memo(({title, amount}: total_lock_type) => {
    return (
        <TotalLock>
            <TotalLockTitle>
                {title}
            </TotalLockTitle>
            <TotalLockAmount>
                {amount}
            </TotalLockAmount>
        </TotalLock>
    )
})
// 切换按钮
export const SwitchButton = React.memo(()=>{
    const off = useV1();
    const [open,setOpen] = React.useState(off);
    const dispatch = useDispatch();
    return (
        <FlexViewEnd>
            <IconSwitch
                src={open?ImageCommon.icon_switch:ImageCommon.icon_switch_un}
                onClick={()=>{
                    setOpen(!open);
                    dispatch(updateV1({v1:!open}));
                }}
            ></IconSwitch>
            <SwitchTitle>{open?"NYC":"YNC"}</SwitchTitle>
        </FlexViewEnd>
    )
})

const IconSwitch = styled.img`
    src:${props => props.src};
    width:66px;
    height:33px;
    margin-right:20px;
    cursor:pointer;
`
const SwitchTitle = styled.div`
    font-size: 24px;
    font-weight: bold;
    color: ${colors.main};
    cursor:pointer;
    margin-right:20px;
`
const Addr = styled.a`
    color:${colors.main};
    font-weight:bold;
    text-decoration:none;
`;
const PriceView = styled.div`
    color:${colors.main};
    font-weight:bold;
`;
export const ContainerModal = styled.div`
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:${colors.black_7};
`
// 显示鱼卡pool
interface fish_card_pool {
    color:number
}
export const FishNFTRewardPool = React.memo(({color}: any) => {
    const {t} = useTranslation();
    const coin:string = "USDT";
    const basisCash = useBasisCash();
    const [onSelectFishModal] = useModal(<MyFishModal coin={"USDT"} color={color}/>);
    const [onWithDrawFishModal] = useModal(<WithDrawFishCardModal coin={"USDT"} color={color}/>);
    const husdpool = useFishLpInfo(color);
    let poolName =  FishLp[color]+'_NFTRewardPool';
    const pool = basisCash?.contracts?.[poolName];
    const addTransaction = useTransactionAdder();
    const name = "NYC";
    let rewardToken = basisCash?.externalTokens?.[name];

    const addr = husdpool.addr || "";
    // 质押
    function depoToken() {
        onSelectFishModal();
    }

    // 提取token
    function withdrawToken() {
        onWithDrawFishModal();
    }

    async function getReward() {
        const response = await pool.getReward();
        addTransaction(response, {
            summary: t("claim")+`${rewardToken.symbol}`,
            approval: {
                tokenAddress: rewardToken.address,
                spender: "",
            },
        });
    }

    return (
        <PledgeItemWrap>
            <CenterView>
                <PledgeWind>
                    {/*<img*/}
                    {/*    src={getFishCardSrc(item.fishTypeNumber, item.fishLevel, 3)}*/}
                    {/*    width={160}*/}
                    {/*    height={160}*/}
                    {/*    style={{marginTop: -36,}}*/}
                    {/*/>*/}
                    <div
                        style={pledge_item_title}
                    >{FishLp[color]}
                    </div>
                    <div
                        style={pledge_item_status}
                    >
                        {t(`${TimeStatusLabel[husdpool.timeStatus]}`)}
                    </div>
                    <div
                        style={pledge_item_amount_title}
                    >{t("stakeLp")}
                    </div>
                    <PledgeItemAmount>
                        {husdpool.totalSupply || "0.0000"}
                    </PledgeItemAmount>
                    <div
                        style={pledge_item_amount_title}
                    >{t("tvl")}
                    </div>
                    <PledgeItemAmount>
                        $ {husdpool.tvl || "0.0000"}
                    </PledgeItemAmount>
                </PledgeWind>
                <PledgeMobile>
                    {/*<div>*/}
                    {/*    <TokenSymbol*/}
                    {/*        symbol={coin}*/}
                    {/*    ></TokenSymbol>*/}
                    {/*    <PledgeItemTitle>*/}
                    {/*        {coin}*/}
                    {/*    </PledgeItemTitle>*/}
                    {/*</div>*/}
                    <div
                        style={pledge_item_title}
                    >{FishLp[color]}
                    </div>
                    <div
                        style={{flex:1}}
                    >
                        <FlexViewBetween>
                            <PledgeItemAmountTitle>
                                {t("stakeLp")}
                            </PledgeItemAmountTitle>
                            <PledgeItemAmount>
                                {husdpool.totalSupply || "0.0000"}
                            </PledgeItemAmount>
                        </FlexViewBetween>
                        <FlexViewBetween>
                            <PledgeItemAmountTitle>
                                {t("tvl")}
                            </PledgeItemAmountTitle>
                            <PledgeItemAmount>
                                $ {husdpool.tvl || "0.0000"}
                            </PledgeItemAmount>
                        </FlexViewBetween>
                    </div>
                </PledgeMobile>
                <WinView>
                    <div
                        style={{marginTop: '25px'}}
                    ></div>
                </WinView>
                <PledgeInfo
                    title={t("myDepo")}
                    value={husdpool.myDepo || "0.0000"}
                ></PledgeInfo>
                <PledgeInfo
                    title={t("myEarned")}
                    value={husdpool.earned || "0.0000"}
                ></PledgeInfo>
                <PledgeInfo
                    title={t("apr")}
                    value={husdpool.apy || "0.0000"}
                ></PledgeInfo>
                <PledgeInfo
                    title={t("apy")}
                    value={husdpool.apr || "0.0000"}
                ></PledgeInfo>
                <PledgeInfo
                    title={t("dailyBonus")}
                    value={husdpool.dailyReward || "0.0000"}
                ></PledgeInfo>
                <PledgeInfo
                    title={t("totalBonus")}
                    value={husdpool.totalReward || "0.0000"}
                ></PledgeInfo>
                <GoLavaSwap></GoLavaSwap>
                <WinView>
                    <PlaceholderView
                        height={'35px'}
                    ></PlaceholderView>
                </WinView>

                {/*<FlexViewCenter>*/}
                {/*    <span*/}
                {/*        style={pledge_info_title}*/}
                {/*    >{t("walletBalance")}</span>*/}
                {/*    <PledgeItemBalance>{husdpool.myBalance || "0.0000"}</PledgeItemBalance>*/}
                {/*</FlexViewCenter>*/}
                <FlexViewCenter>
                    <Addr href={`${config.etherscanUrl}/address/${addr}`} target="_blank">
                        Contract address: {addr.substring(0, 4) + '****' + addr.substring(addr.length - 4, addr.length)}
                    </Addr>
                </FlexViewCenter>
                    <BlueButton
                        title={"质押鱼卡"}
                        onClick={depoToken}
                    ></BlueButton>
                    <MainButton
                        onClick={withdrawToken}
                        title={"提取鱼卡"}
                    ></MainButton>
                    <BorderButton
                        onClick={getReward}
                        title={t("claim")+name}
                    ></BorderButton>
            </CenterView>
        </PledgeItemWrap>
    )
})
